<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例: 1.input文本输入框
					2.textarea 文本域
					3.select下拉框
					4.radio 单选框
					5.checkbox复选框
			 -->
			 <form action="#">
			 	<h1>表单提交数据-数据封装</h1>
				姓名：<input type="text" v-model="user.username"/><br />
				详情：<textarea v-model="user.info"></textarea><br />
				<!-- 如果下拉框支持多选 multiple="true"-->
				城市:
				<select v-model="user.city" multiple="true" name="city">
					<option value="上海">上海</option>
					<option value="北京">北京</option>
					<option value="广州">广州</option>
				</select>
				<br />
				性别:<input type="radio" value="男" name="gender" v-model="user.gender"/>男
					 <input type="radio" value="女" name="gender" v-model="user.gender"/>女
					 <br />
					爱好:<input type="checkbox" value="0" />篮球
					 <input type="checkbox" value="1" />足球
					 <input type="checkbox" value="2" />排球
			 </form>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						username: '',
						info: '用户详情',
						//如果数据单值采用字符串, 如果是多值 采用数组
						city: ['北京','上海'],
						gender: '女'
					}
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>
